<script setup lang="ts">
import { ref } from 'vue'
import { loginEtc } from '@/api/login'
import { showToast } from 'vant'
import { useAppStore } from '@/store/modules/app'
import { useStorage } from '@/hooks/web/useStorage'
import { useRouter } from 'vue-router'
const { setStorage, getStorage } = useStorage()
const appStore = useAppStore()

const username = ref('')
const password = ref('')
const checked = ref(true)
const { push } = useRouter()
const onSubmit = (values: any) => {
  loginEtc(values).then(async (res) => {
    if (res.data) {
      console.log(res)
      if (res.statusCode == 201) {
        appStore.setUserInfo(res.data)
        push({
          name: 'richText'
        })
      } else {
        showToast('登陆成功')
        appStore.setUserInfo(res.data)
        // console.log(getStorage('userInfo'))
        // console.log(appStore.getUserInfo)
        push({
          name: 'newTask'
        })
      }
    } else {
      showToast(res.message)
    }
  })
}
const gotoDoc = () => {
  push({
    name: 'richText',
    query: {
      type: 'show'
    }
  })
}
</script>

<template>
  <div class="formBox">
    <div>
      <div class="logoBox">
        <img src="~@/assets/img/logo.png" alt="" />
      </div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="userName"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-checkbox size="s" v-model="checked"
            >同意
            <span class="link" @click.native="gotoDoc">《展业承诺书》</span>
          </van-checkbox>
        </div>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 登录 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style scoped lang="less">
.formBox {
  height: 100vh;
  background-color: var(--van-background);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5vh 0 25vh 0;
  .logoBox {
    display: flex;
    justify-content: center;
    padding: 32px;
    img {
      width: 20%;
    }
  }
}
.link {
  color: var(--van-primary-color);
}
</style>
